<template>
<h1>管理员</h1>
<div>
  <div>
    <a-space>
    帖子状态:
    <a-radio-group v-model:value="eventQuery.approvalStatus" button-style="solid" @change="changeApprovalStatusShow">
      <a-radio-button value="Pending">待审查</a-radio-button>
      <a-radio-button value="Approved">已通过</a-radio-button>
      <a-radio-button value="Rejected">已拒绝</a-radio-button>
    </a-radio-group>
    </a-space>
  </div>
  <ul>
    <li v-for="item in pageinfoEvent.list" :key="item.id">
      {{item.id}}
      <router-link :to="{ name: 'detail', params: { eventId: item.id }}">{{item.title}}</router-link>
      {{item.createTime}}
      <template v-if="eventQuery.approvalStatus=='Pending'">
        <a-button type="primary" shape="round" @click="changeApprovalStatus(item.id,'Approved')" >通过</a-button>
        <a-button type="primary" danger  shape="round"  @click="changeApprovalStatus(item.id,'Rejected')">拒绝</a-button>
      </template>
      <template v-if="eventQuery.approvalStatus!='Pending'">
        <a-button type="primary" shape="round" @click="changeApprovalStatus(item.id,'Pending')" >撤回</a-button>
      </template>
    </li>
  </ul>
  <div class="pagination">
    <a href="javascript:void(0)" @click="changePage(1)">首页</a>
    <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum-1)">&laquo; 上一页</a>
    <a href="javascript:void(0)"
       :class="{paginationok:pageNum==eventQuery.pageNum}"
       v-for="pageNum in pageinfoEvent.navigatepageNums"
       @click="changePage(pageNum)">
      {{pageNum}}
    </a>
    <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum+1)">下一页 &raquo;</a>
    <a href="javascript:void(0)" @click="changePage(pageinfoEvent.pages)">末页</a>
    <span>第 {{ eventQuery.pageNum }} 页，共 {{ pageinfoEvent.pages }} 页</span>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "AdminHome",
  data(){
    return{
      pageinfoEvent:{},
      eventQuery:{
        pageNum:1,
        pageSize:10,
        approvalStatus:'Pending',
        sort:'id',
        order:'desc',
      },
    }
  },
  methods:{
    loadEventList(){
      axios.get(`/admin/event/list`,{
        params:{
          ...this.eventQuery
        }
      }).then(res => {
        this.pageinfoEvent = res.data.data
      })
    },
    changeApprovalStatusShow(){
      this.eventQuery.pageNum = 1
      this.loadEventList()
    },
    changePage(page){
      if(page>=1 && page<=this.pageinfoEvent.pages) {
        this.eventQuery.pageNum = page
        this.loadEventList()
      }
    },
    changeApprovalStatus(id,state){
      axios.put('/admin/event/update/approvalStatus',{
        id:id,
        approvalStatus:state
      }).then(res => {
        this.loadEventList()
      })
    }
  },
  computed: {
    loginUser() {
      return this.$store.state.user;
    }
  },
  mounted(){
    this.loadEventList()
  },
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: hotpink;
}
.pagination span {
  margin: 0 5px;
}

/* 被点击时的样式 */
.paginationok {
  color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
  text-decoration: underline !important; /* 添加下划线 */
}
</style>